<template>
  <view class="wrap" style="padding-top:50rpx;">
    <view class="reg-text" style="color:#000000;font-weight:bold;">请输入验证码</view>
    <view class="remind-text">验证码已通过短信发送至+86 {{phoneNo}}</view>
    <u-message-input mode="box" @finish="finish" :maxlength="6" :breathe="true"></u-message-input>
    <view class="remind-text">
      <view v-if="!codeDisabled">{{loadTime}}秒后可重新获取验证码<br> </view>
      <!-- <view class="button" :disabled="getCodeDisabled" @click="getCode()"><text>重新获取验证码</text></view> -->
      <u-verification-code :keep-running="true" :seconds="seconds"  ref="uCode"
        @change="codeChange" :startText="startText" :changeText="changeText" :endText="endText">
      </u-verification-code>
      <!-- <u-button v-if="codeDisabled"   class="button" @tap="getCode">{{tips}}</u-button> -->
      <button class="button" v-if="codeDisabled" @click="getCode()"><text>重新获取验证码</text></button>
    </view>
  </view>
</template>
<script>
  import store from '@/store/index.js';
  import { publicBar, selfBar}  from '@/js_sdk/tabbar.js'
  export default {
    data() {
      return {
        message:'',
        phoneNo: '',
        password: '',
        verificationCode: '',
        tips: '',
        seconds: 60,
        refCode: null,
        startText: '重新获取验证码',
        changeText: 'X秒重新获取',
        endText: '重新获取验证码',
        loadTime: 60,
        codeDisabled: false,
        timer: '',
        current: '',
         cid: '',
      };
    },
    onLoad(option) {
      this.phoneNo = option.phoneNo
      this.password = option.password
      this.current= option.current
    },
    created() {
      this.timer = setInterval(this.getTime, 1000)
    },
    watch: {},
    methods: {
      getTime() {
        this.loadTime--
        if (this.loadTime === 0) {
          clearInterval(this.timer)
          this.codeDisabled = true
        }
      },
      codeChange(text) {
        this.tips = text;
      },
      getCode() {
        this.codeDisabled = !this.codeDisabled
        this.loadTime = 2
        this.timer = setInterval(this.getTime, 1000)
        // uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖

        // 通知验证码组件内部开始倒计时
        this.$u.api.sendCode({
            phoneNo: this.phoneNo,
            codeType: '1',
          })
          .then(res => {
            if (res.code == '200') {
              this.$u.toast('验证码已发送');
            } else {
              this.$u.toast(res.msg);
            }
          });


      },
      finish(e) {
        
        plus.push.getClientInfoAsync((info) => {
           this.cid = info["clientid"];
        this.$u.api.registerUser({
            phoneNo: this.phoneNo,
            password: this.password,
            username: this.phoneNo,
            validCode: e,
            current : this.current,
            cid :  this.cid
          })
          .then(res => {         
            
            
            
            
            if (res.code == '200') {
              
              
              
              if(res.studentArray==''){
                  this.$u.vuex('vuex_teacherId',res.teacherId)
     this.$u.vuex('vuex_tabbar',selfBar)
     }
     else{
         this.$u.vuex('vuex_studentArray',res.studentArray)
         this.$u.vuex('vuex_tabbar',publicBar)
              }
              if(this.current == 0){
                  uni.navigateTo({
                    url: '/pages/sys/login/registerInformation?phoneNo='+this.phoneNo
                  });}
                  else if(this.current == 1){
                    uni.navigateTo({
                      url: '/pages/sys/login/registerTeacher?phoneNo='+this.phoneNo
                    });
                    
                  }
              
          
            } else {
              this.$u.toast(res.msg);
            }
          });
          
              });
  


      }
    }
  };
</script>
<style lang="scss">
  @import 'index.scss';

  .remind-text {
    padding: 30rpx 70rpx;
    color: #666666;

    em {
      font-weight: bold;
      color: #242424;
      font-style: normal;
      margin: 0 5px;
    }
  }
</style>